<template>
    <div class="divBox">
        <el-card class="box-card">
            <el-tabs v-model="showType">
                <el-tab-pane label="幻灯片" name="banner" />
                <el-tab-pane label="企业介绍" name="introduce" />
                <!-- <el-tab-pane label="公司新闻" name="BBC" /> -->
                <el-tab-pane label="联系我们" name="contact" />
                <el-tab-pane label="文章管理" name="count" />
            </el-tabs>
            <el-form :model="data" label-width="130px">
                <div v-show="showType=='banner'">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-form-item label="企业形象幻灯片：" prop="slider_image">
                                <div class="acea-row">
                                    <div v-for="(item,index) in data.banner" :key="index" class="pictrue" draggable="false" @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)">
                                        <img :src="item">
                                        <i class="el-icon-error btndel" @click="handleRemove(index,1)" />
                                    </div>
                                    <div class="upLoadPicBox" @click="modalPicTap(1)">
                                        <div class="upLoad">
                                            <i class="el-icon-camera cameraIconfont" />
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="showType=='introduce'">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-form-item label="企业介绍图片：">
                                <div class="acea-row">
                                    <div class="pictrue" draggable="false" v-if="data.enterpriseImg">
                                        <img :src="data.enterpriseImg">
                                        <i class="el-icon-error btndel" @click="handleRemove(index,2)" />
                                    </div>
                                    <div class="upLoadPicBox" @click="modalPicTap(2)" v-if="!data.enterpriseImg">
                                        <div class="upLoad">
                                            <i class="el-icon-camera cameraIconfont" />
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-form-item label="企业介绍简介：">
                                <el-input v-model="data.enterpriseIntroduce" type="textarea" :rows="3" placeholder="请输入企业介绍简介" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="showType=='contact'">
                    <el-row :gutter="24">
                        <el-col :span="9">
                            <el-form-item label="联系电话：">
                                <el-input v-model="data.phone" placeholder="请输入企业联系电话" />
                            </el-form-item>
                            <el-form-item label="地址：">
                                <el-input v-model="data.address" enter-button="查找位置" style="width: 100%;" placeholder="请查找位置">
                                <el-button slot="append" style="background: #46a6ff; color: #fff; border-radius: 0 4px 4px 0;" @click="onSearchs" >查找位置</el-button>
                                </el-input>
                                <div slot="content">请点击查找位置选择位置</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="showType=='count'">
                    <el-row :gutter="24">
                        <el-col :span="9">
                            <el-form-item label="文章ID：">
                                <el-input v-model="data.article_ids" placeholder="请输文章ID" />
                                <span>ID之间用英文,分割</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-button
                        type="primary"
                        icon="ios-search"
                        label="default"
                        class="button"
                        size="small"
                        @click="confirm"
                        >提交</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-dialog
                v-if="modalMap"
                v-model="modalMap"
                :visible.sync="modalMap"
                title="选择位置"
                close-on-click-modal
                class="mapBox"
                custom-class="dialog-scustom"
                :append-to-body= 'true'
                >
                <iframe id="mapPage" width="100%" height="500px" frameborder="0" :src="keyUrl" />
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import { getConfigApi} from '@/api/systemForm'
import { getCompanyInfo,upCompanyInfo } from "@/api/buss"
    export default{
        data(){
            return{
                // 展现类型
                showType:"banner",
                // 数据
                data:{
                    // 幻灯片
                    banner:[],
                    // 企业介绍图片
                    enterpriseImg:"",
                    // 企业介绍简介
                    enterpriseIntroduce:"",
                    // 联系电话
                    phone:"",
                    // 地址
                    address:"",
                    lat:0,
                    lng:0,
                    mer_id:0,
                    article_ids:""
                },
                modalMap: false,
                mapKey: "",
                keyUrl: "",
                delivery_type: 1,
            }
        },
        mounted(){
            this.getMapKey()
            window.addEventListener(
            'message',
            function(event) {
                // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                var loc = event.data
                if (loc && loc.module === 'locationPicker') {
                // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                window.parent.selectAdderss(loc)
                }
            },
            false
            )
            window.selectAdderss = this.selectAdderss
            this.getCompanyInfo()
        },
        methods:{
            // 提交
            confirm(){
                var obj = {
                    id:this.data.mer_id
                };
                if(this.showType=='banner'){
                    obj.company_images = JSON.stringify(this.data.banner)
                }else if(this.showType=='introduce'){
                    obj.compang_banner = this.data.enterpriseImg
                    obj.company_des = this.data.enterpriseIntroduce
                }else if(this.showType=='contact'){
                    obj.phone = this.data.phone
                    obj.address = this.data.address
                    obj.latitude = this.data.lat
                    obj.longitude = this.data.lng
                }else if(this.showType=='count'){
                    obj.article_ids = this.data.article_ids
                }
                upCompanyInfo(obj).then(res=>{
                    this.$message.success(res.message)
                    this.getCompanyInfo()
                })
            },
            // 获取官网信息
            getCompanyInfo(){
                getCompanyInfo().then(res=>{
                    this.data.banner = JSON.parse(res.data.company_images)
                    this.data.enterpriseImg = res.data.compang_banner
                    this.data.enterpriseIntroduce = res.data.company_des
                    this.data.mer_id = res.data.id
                    this.data.address = res.data.address
                    this.data.phone = res.data.phone
                    this.data.lat = res.data.latitude
                    this.data.lng = res.data.longitude
                    this.data.article_ids = res.data.article_ids
                })
            },
            // 选择经纬度
            selectAdderss(data) {
                console.log(data)
                this.data.lat = data.latlng.lat
                this.data.lng = data.latlng.lng
                this.data.address = data.poiaddress
                this.modalMap = false
            },
            // 获取KEY值
            getMapKey() {
                getConfigApi().then(res => {
                    this.mapKey = res.data.tx_map_key
                    const keys = res.data.tx_map_key
                    this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
                    this.delivery_type = res.data.delivery_type
                })
                .catch(res => {
                    this.$message.error(res.message)
                })
            },
            // 查找位置
            onSearchs() {
                // if (!this.mapKey || this.mapKey == '') { this.$message.error('平台未配置腾讯地图KEY') } else 
                this.modalMap = true
            },
            // 添加企业形象幻灯片
            modalPicTap(type) {
                const _this = this
                if(type == 1){
                    if (!_this.data.banner) {
                    _this.data.banner = []
                }
                    this.$modalUpload(function(img) {
                        img.map((item) => {
                            _this.data.banner.push(item)
                        })
                    },null)
                }else if(type == 2){
                    this.$modalUpload(function(img) {
                        _this.data.enterpriseImg=img[0]
                    },'1')
                }
            },
            // 删除企业形象幻灯片
            handleRemove(i,type) {
                if(type == 1){
                    this.data.banner.splice(i, 1)
                }else if(type == 2){
                    this.data.enterpriseImg = ''
                }
            },
            // 移动
            handleDragStart(e, item) {
                this.dragging = item
            },
            handleDragEnd(e, item) {
                this.dragging = null
            },
            handleDragOver(e) {
                e.dataTransfer.dropEffect = 'move'
            },
            handleDragEnter(e, item) {
                e.dataTransfer.effectAllowed = 'move'
                if (item === this.dragging) {
                    return
                }
                const newItems = [...this.data.banner]
                const src = newItems.indexOf(this.dragging)
                const dst = newItems.indexOf(item)
                newItems.splice(dst, 0, ...newItems.splice(src, 1))
                this.data.banner = newItems
            }
        }
    }
</script>
<style scoped lang="scss">
    .pictrue {
        width: 60px;
        height: 60px;
        border: 1px dotted rgba(0, 0, 0, 0.1);
        margin-right: 10px;
        position: relative;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
        .btndel {
            position: absolute;
            z-index: 1;
            width: 20px !important;
            height: 20px !important;
            left: 46px;
            top: -4px;
        }
    }
    .button{
        float: right;
    }
</style>